#{extends 'mana-main.html' /}
#{set articleActive: "active" /}
#{set title:"文章编辑"/}
#{set 'moreStyles' }
    <style type="text/css" media="screen">
        .article{
            margin-top: 60px;
        }
        .article textarea{
            width: 50%;
            height: 8em;
            resize: none;
        }
        .coverPhotoImg{
            width: 200px;
            min-height: 100px;
            margin-bottom: 10px;
            border: 2px solid #ddd;
        }
        .coverPhotoImg img{
            width: 100%;
        }
    </style>
#{/set}
<div class="article row">
    <form action="@{Articles.saveArticle}" method="post" class="span10 offset1">
    #{if article != null}
        <input type="hidden" name="article.id" value="${article.id}">
        <div class="control-group">
            <label class="control-label" for="username">文章标题</label>
            <div class="controls">
                <input type="text" id="username" name="article.title" value="${article.title}" placeholder="文章标题">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">文章封面</label>
            <div class="controls">
                <div class="coverPhotoImg">
                    <img src="${article.getZipPhotoSrc()}" id="coverPhotoImg" class="img-rounded">
                </div>
                <input type="text" id="coverPhoto" name="article.photoId" value="${article.photoId}" placeholder="文章封面">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="username">文章简介</label>
            <div class="controls">
                <script id="articleDescription" name="article.description" type="text/plain">${article.description.raw()}</script>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="username">文章内容</label>
            <div class="controls">
                <script id="articleContent" name="article.content" type="text/plain">${article.content.raw()}</script>
            </div>
        </div>
    #{/if}
    #{else}
        <div class="control-group">
            <label class="control-label" for="username">文章标题</label>
            <div class="controls">
                <input type="text" id="username" name="article.title" placeholder="文章标题">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">文章封面</label>
            <div class="controls">
                <div class="coverPhotoImg">
                    <img class="img-rounded" id="coverPhotoImg">
                </div>
                <input type="text" id="coverPhoto" name="article.photoId" placeholder="文章封面">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="username">文章简介</label>
            <div class="controls">
                <script id="articleDescription" name="article.description" type="text/plain"></script>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="articleContent">文章内容</label>
            <div class="controls">
                <script id="articleContent" name="article.content" type="text/plain"></script>
            </div>
        </div>
    #{/else}
        <div class="control-group">
            <label class="control-label">&nbsp;</label>
            <div class="controls">
                <input type="submit" class="btn btn-primary">
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="@{'/public/ueditor/ueditor.config.js'}"></script>
<script type="text/javascript" src="@{'/public/ueditor/ueditor.all.js'}"></script>
<script type="text/javascript">
	var editor = new UE.ui.Editor({initialFrameHeight:100
	,toolbars:[]});
	editor.render("articleDescription");
    var ue = UE.getEditor('articleContent');
    $('#coverPhoto').bind('showPhoto',function(){
        var id = $(this).val();
        $.ajax({
            method: 'get',
            url: '@{Articles.getPhotoSrc()}?photoId=' + id,
            success: function(data){
                $('#coverPhotoImg').attr('src',data);
            }
        });
        // DB4DC9ABAB8946688512C93FE6A9195F
    });
    $('#coverPhoto').blur(function(event) {
      	 $('#coverPhoto').trigger('showPhoto')
      });
</script>